<template>
  <div>
    <el-container>
      <el-header>MyVue.vue</el-header>
      <el-main>
        <table>
          <tr>
            <th>
              username
            </th>
            <th>
              password
            </th>
          <tr>
            <td>

              <input type="text" v-model="userInsert.username" />
            </td>
            <td>
              <input type="text" v-model="userInsert.password" />
            </td>
          </tr>
          </tr>
          <tr>
            <td colspan="2">
              <el-button type="primary" @click="insertUser">insert</el-button>
            </td>

          </tr>

<!-- <el-input type="text" v-model="userInsert.username"> -->
<!-- <el-input type="text" v-model="userInsert.password"> -->
        </table>
        

        <table>
          <tr>
            <th>
              username
            </th>
            <th>
              password
            </th>
            <th>
              id
            </th>
            <th>
              phone
            </th>
            <th>
              email
            </th>
            <th>
              status
            </th>

          <tr>
            <td>
              <input type="text" v-model="userUpdate.username" />
            </td>
            <td>
              <input type="text" v-model="userUpdate.password" />
            </td>
            <td>
              <input type="text" v-model="userUpdate.id" />
            </td>
            <td>
              <input type="text" v-model="userUpdate.phone" />
            </td>
            <td>
              <input type="text" v-model="userUpdate.email" />
            </td>
            <td>
              <input type="text" v-model="userUpdate.status" />
            </td>
          </tr>
          </tr>
          <tr>
            <td colspan="3">
              <el-button type="primary" @click="updateUserById">update</el-button>
            </td>
          </tr>

        </table>

      </el-main>
    </el-container>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        userInsert: {
          id: '',
          username: '',
          password: '',
          phone: '',
          email: '',
          status: ''
        },
        userUpdate: {
          id: '',
          username: '',
          password: '',
          phone: '',
          email: '',
          status: ''
        },
        userList: [],
        value1: ''
      }
    },
    methods: {
      async getAll() {
        let {
          data: val
        } = await this.$http.get(`/user/hello`)
        this.userList = val
      },
      async insertUser() {
        let {
          data: flag
        } = await this.$http.post(`/user/insert`, this.userInsert)
        this.$message.success(flag)
      },
      async updateUserById() {
        let id = this.userUpdate.id
        this.$message.info("id是：" + id)
        if (id !== 1 && id !== 2 && id !== 4 && id !== 5) {
          let {
            data: flag
          } = await this.$http.put(`/user/updateById`, this.userUpdate)
          console.log(flag)
          this.$message.success("返回值是" + flag)
        } else {
          console.log("更新失败")

        }
      }

    },
    mounted() {
      this.getAll()
    }
  }
</script>
<style>


</style>
